<template>
    <div>
      <headerNav :title="type === 'address' ? '新增' : '修改'"/>
      <div class="edit_address">
        <van-address-edit
          v-if="info"
          :area-list="areaList"
          :address-info="info"
          :show-delete="isdelete"
          show-search-result
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          >
          <template slot="default">
            <van-cell-group>
                <van-field v-model="compName" label="所属公司" placeholder="所属公司" @click="handlePicker('company')"/>
            </van-cell-group>
            <!-- <van-cell-group>
                <van-field v-model="inviteUserName" label="推荐客户" placeholder="推荐客户" @click="handlePicker('user')"/>
            </van-cell-group> -->
            <van-cell-group>
                <van-field v-model="inviteUserNo" label="推荐人手机号" placeholder="请输入推荐人手机号"/>
            </van-cell-group>
          </template>
        </van-address-edit>
     </div>
     <van-picker
        v-show="showPicker"
        show-toolbar
        title="标题"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
      
    </div>
</template>

<script>
import Vue from "vue"
import areaList from '../../../data/area';
import { createCustomer,updateUser,deleteById, getSysCompany, getAllUser } from "../../../api/page.js";

import { AddressEdit, Picker } from 'vant';
Vue.use(AddressEdit).use(Picker)
export default {
    data() {
    return {
      areaList,
      info:{},
      id:this.$route.query.id,
      isdelete:false,
      type:this.$route.query.type,
      message:"",
      // 左侧高亮元素的index
      mainActiveIndex: 0,
      // 被选中元素的id
      activeId: 1,
      //公司编号
      compNo: "",
      //公司名称
      compName: "",
      //客户编号
      userNo: "",
      //客户名称
      userName: "",
      //推荐人编号
      inviteUserNo: "",
      //推荐人姓名
      inviteUserName: "",
      //手机号
      phoneNum: "",
      //电话
      tel: "",
      pickerType: "",
      showPicker: false,
      columns: [],
      allUser: [],
      allCompany: []
    }
  },
  created:function(){
    if(this.$route.query.type=="edit") {
      const info = JSON.parse(window.localStorage.getItem('address'))
      console.log("create===========>"+info.phoneNum+"=========>"+info.tel)
      let address = {
        addressDetail:  info.address,
        city:  info.cityName,
        country:  info.districtName,
        name:  info.name,
        province:  info.provinceName,
        areaCode: info.areaCode,
        phoneNum:  info.phoneNum,
        tel:  info.phoneNum,
        inviteUserNo:  info.inviteUserNo,
        inviteUserName:  info.inviteUserName,
        compNo:  info.compNo,
        compName:  info.compName,
        userNo:  info.userNo,
        userName:  info.userName
      }
      this.info = address
      this.userNo = address.userNo
      this.userName = address.userName
      this.compNo = address.compNo
      this.compName = address.compName
      this.inviteUserNo = address.inviteUserNo
      this.inviteUserName = address.inviteUserName
      this.isdelete = true;
      console.log("info", address)
    }
  },
  mounted(){
   this.getSysCompany()
   this.getAllUser()
  },  
  methods: {
    onNavClick(index) {
      this.mainActiveIndex = index;
    },
    onItemClick(data) {
      this.activeId = data.id;
    },
    handlePicker(str) {
      if (str === 'user') {
        this.columns = this.allUser
      } else {
        this.columns = this.allCompany
      }
      this.pickerType = str
      this.showPicker = true
    },
    onCancel() {
      this.showPicker = false
    },
    onConfirm(item, index) {
      if (this.pickerType === 'user') {
        // this.inviteUserNo = item.value
        // this.inviteUserName = item.text
      } else {
        this.compNo = item.value
        this.compName = item.text
      }
      this.showPicker = false
      console.log(item, index)
    },
    onSave(data) {
      let code = data.areaCode || "";
      let obj = {
        contactAddr: data.addressDetail,
        cityName: data.city,
        districtName: data.county,
        userName: data.name,
        provinceName: data.province,
        phoneNum: data.tel,
        tel: data.tel,
        inviteUserNo: this.inviteUserNo,
        inviteUserName: this.inviteUserName,
        compNo: this.compNo,
        compName: this.compName,
        userNo: data.userNo
      }
      if(this.type=="address"){
        obj.cityCode = parseInt(code.substring(0, 4))*100,
        obj.districtCode= parseInt(code),
        obj.provinceCode= parseInt(code.substring(0, 2))*10000,
        // 添加地址
        createCustomer(obj).then(res=>{
          if(res.retCode=="200"){
            this.$toast('添加成功');
            this.$router.go(-1);
          }
        })
      }else if(this.type=="edit"){
        obj.id=this.$route.query.id,
        obj.cityCode = parseInt(code.substring(0, 4))*100,
        obj.districtCode= parseInt(code),
        obj.provinceCode= parseInt(code.substring(0, 2))*10000,
        updateUser(obj).then(res=>{
          if(res.retCode=="200"){
            this.$toast('修改成功');
            this.$router.go(-1);
          }
        })
      } 
    },
    onDelete() {
      deleteById({
        id:this.id
      }).then(()=>{
        this.$toast('删除成功');
        this.$router.go(-1);
      })
    },
    getSysCompany() {
      getSysCompany().then(res => {
        this.allCompany = res.data.map(v => {
          return {
            text: v.compName,
            value: v.compNo
          }
        })
      })
    },
    getAllUser() {
      getAllUser().then(res => {
        this.allUser = res.data.map(v => {
          return {
            text: v.userName,
            value: v.userNo
          }
        })
      })
    }
  }

}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  border: none;
  border-radius: 0.64rem;
  background: #FF531A;
}
/deep/ .van-picker__toolbar{
  font-size: 0.426667rem !important;
}
.edit_address{
  padding-top: 1.066667rem;
}
.van-picker__toolbar{
  font-size: 0.426667rem;
}
</style>
